<template>
  <div class="weather" v-show="weatherData.isShowWeather" >
    <div class="temperature">
      <p>{{ weatherData.temperature }}°C</p>
    </div>
    <div class="city-name">{{ weatherData.cityName }}</div>

    <div class="weather-details">
      <div class="detail-item">
        <span class="detail-label">湿度</span>
        <span class="detail-value">{{ weatherData.humidity }}%</span>
      </div>
      <div class="detail-item">
        <span class="detail-label">风力</span>
        <span class="detail-value">{{ weatherData.windSpeed }} 米/秒</span>
      </div>
      <div class="detail-item">
        <span class="detail-label">气压</span>
        <span class="detail-value">{{ weatherData.pressure }} hPa</span>
      </div>
    </div>

    <div class="footer">数据来源于公开天气 API</div>
  </div>
</template>
<script>
export default {
  name: "weather",
  data() {
    return {
      weatherData: {
        cityName: "北京", // 用于存储输入的城市名称
        temperature: "20", // 温度
        humidity: "50", // 湿度
        windSpeed: "", // 风速
        pressure: "", // 气压
        isShowWeather: false, // 是否显示天气数据
      },
    };
  },
  methods: {
    displayWeatherData(weatherData) {
      // 更新组件的状态以显示天气数据
      console.log("接收到的天气数据:", weatherData);
      this.weatherData.cityName = weatherData.cityName;
      this.weatherData.temperature = weatherData.temp;
      this.weatherData.humidity = weatherData.humidity;
      this.weatherData.windSpeed = weatherData.windSpeed;
      this.weatherData.pressure = weatherData.grndLevel;
      this.weatherData.isShowWeather = weatherData.isShowWeather; // 显示天气数据
    },
  },
  mounted() {
    this.$bus.$on("displayWeatherData", this.displayWeatherData);
  },
};
</script>
<style scoped>
.temperature {
  font-size: 56px;
  font-weight: bold;
  margin: 20px 0;
  color: #2d3436;
}

.city-name {
  font-size: 28px;
  margin-bottom: 15px;
  color: #636e72;
}

.weather-details {
  display: flex;
  justify-content: space-around;
  margin-top: 25px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.detail-label {
  font-size: 14px;
  color: #b2bec3;
  margin-bottom: 5px;
}

.detail-value {
  font-size: 20px;
  font-weight: bold;
  color: #2d3436;
}

.footer {
  margin-top: 30px;
  font-size: 12px;
  color: #b2bec3;
}
</style>
